import { View, ticker, Camera, globalEmitter } from 'feng3d';
import { EditorData } from '../global/EditorData';

export class CameraPreview extends eui.Component
{
    public group: eui.Group;
    //
    private saveParent: egret.DisplayObjectContainer;
    private canvas: HTMLElement;
    private previewView: View;

    get camera()
    {
        return this._camera;
    }
    set camera(value)
    {
        if (this._camera)
        {
            ticker.offframe(this.onframe, this);
        }
        this._camera = value;
        this.previewView.camera = this._camera;
        this.visible = !!this._camera;
        this.canvas.style.display = this._camera ? 'inline' : 'none';
        if (this._camera)
        {
            ticker.onframe(this.onframe, this);
        }
    }

    private _camera: Camera;

    constructor()
    {
        super();
        this.skinName = 'CameraPreview';
    }

    $onAddToStage(stage: egret.Stage, nestLevel: number)
    {
        super.$onAddToStage(stage, nestLevel);
        this.initView();
    }

    private initView()
    {
        if (this.saveParent) return;

        //
        const canvas = this.canvas = document.createElement('canvas');
        (document.getElementById('CameraPreviewLayer')).appendChild(canvas);
        this.previewView = new View(canvas);
        this.previewView.mouse3DManager.mouseInput.enable = false;
        this.previewView.stop();
        //
        this.saveParent = this.parent;
        ticker.nextframe(() =>
        {
            this.parent.removeChild(this);
        });
        globalEmitter.on('editor.selectedObjectsChanged', this.onDataChange, this);

        this.addEventListener(egret.Event.RESIZE, this.onResize, this);
        this.addEventListener(egret.Event.ENTER_FRAME, this.onResize, this);

        this.onResize();
    }

    private onResize()
    {
        if (!this.stage)
        { return; }

        this.height = this.width * 3 / 5;

        const bound = this.group.getGlobalBounds();

        const style = this.canvas.style;
        style.position = 'absolute';
        style.left = `${bound.x}px`;
        style.top = `${bound.y}px`;
        style.width = `${bound.width}px`;
        style.height = `${bound.height}px`;
        style.cursor = 'hand';
    }

    private onDataChange()
    {
        const selectedGameObjects = EditorData.editorData.selectedGameObjects;
        if (selectedGameObjects.length > 0)
        {
            for (let i = 0; i < selectedGameObjects.length; i++)
            {
                const camera = selectedGameObjects[i].getComponent(Camera);
                if (camera)
                {
                    this.camera = camera;
                    this.saveParent.addChild(this);

                    return;
                }
            }
        }
        this.camera = null;
        this.parent && this.parent.removeChild(this);
    }

    private onframe()
    {
        if (this.previewView.scene !== EditorData.editorData.gameScene)
        {
            this.previewView.scene = EditorData.editorData.gameScene;
        }
        this.previewView.render();
    }
}
